<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class='nav'>
			<!-- #ifdef H5 -->
				<view style="height: 44px;width: 100%;">边距盒子</view>
			<!-- #endif -->
			<!-- 搜索 -->
		<!-- 	<view class='searchInput999'>
				<view class='searchBox999'>
					<image src='/static/icon-search.png' class='search999'></image>
				</view>
				<input class='input999' placeholder="输入关键词"></input>
			</view> -->
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			
			<!-- 模板语法v-for也能嵌套循环 -->
			
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view  style="height: 100%;" scroll-y="true" @scrolltolower="max==0?lower1():''" scroll-with-animation :scroll-into-view="toView">
					<view :id="'top'+listIndex" style="width: 100%;height: 120upx;">边距盒子</view>
					<view class='content'>
				
		
						<view class="uni-list">
								<view class="uni-list-cell" hover-class="uni-list-cell-hover"   v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index">
									<view class="uni-media-list" style="height: 100px;">
									
										<view class="uni-media-list-body"  @tap="detail" :data-oid='item.oid' style="height: 70px;">
											<view class="uni-media-list-text-top">预约机构：{{array2[item.store]}}
										<br>
										
											</view>
											<view class="uni-media-list-text-bottom">
												申请人所在地区:{{array1[item.position]}}
												<br>
												<text>申请人：{{item.name}}</text>	<br>
												<text>预约日期：{{item.date}}</text>
											</view>
										</view>
										<view class="uni-media-list-logo" style="height: 80px;width: 120px;">
											<button :type= "item.state == 0? 'primary' : 'error'" class="primary"  style="list-height: 2;margin: 8px;margin-top: 0px;"  :data-oid='item.oid' :data-state='item.state'  @tap="agree">{{item.state == 0? '通过' : '已通过'}}</button>
											<button type="error" class="error" style="line-height: 2;margin: 8px;margin-top: 0px;"  :data-oid='item.oid' @tap="refuse">退回</button>
										</view>
											
									</view>
								</view>	
						</view>
						
						<view class='' style="text-align: center;" v-if="max==1">
							暂无信息
						</view>
					
						
					</view>
					<view class='noCard' v-if="listItem.length===0">
						暂无信息
					</view>
					<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
				</scroll-view>
				
				
			</swiper-item>
		</swiper>
	<!-- 	<tabBar4 :currentPage="currentPage"></tabBar4> -->
	</view>
</template>

<script>
const util = require('../../util/util.js');
import refresh from '../../components/refresh.vue';
import navTab from '../../components/navTab.vue';
import tabBar4 from '../../components/tabBar4.vue';
import uniCard from '@/components/uni-card/uni-card.vue';

export default {
	components: {refresh,navTab,tabBar4,uniCard},
	data() {
		return {
			toView:'',//回到顶部id
			max:'0',
			state:'0',
		   currentPage:'longIndex',
		   currentTab: 0, //sweiper所在页
			pages:[1,1,1,1,1,1,1,1,1], //第几页存储 
			tabTitle:['选择一','选择二','选择三','选择四','选择五','选择六','选择七','选择八','选择九'], //导航栏格式
			list: [[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],[],['2233','4234','13144','324244'],[1, 2, 3, 4, 5, 6],['a', 'b', 'c', 'd', 'e', 'f'],['7'],['8'],['9号']] ,//数据格式
			array1: ['惠州', '广州', '中山', '佛山'],
			array2: ['德国莱茵检测中心', '中国检验认证', '广东精测检测中心', '华测检测','必维国际检测集团'],
		  };
	},
	onLoad(e) {

		this.update(1,0).then((res)=>{
			console.log(res);
		});
		
	},
	onShow() {},
	onHide() {},
	methods: {
		detail(e){
			
		// 	var nid = e.currentTarget.dataset.nid;
		// 	uni.navigateTo({
		// 		url: '../detail/detail?nid='+nid
		
		// 	});
			
			
		},
		agree(e){		
			var oid = e.currentTarget.dataset.oid;
			var state = e.currentTarget.dataset.state;
			if(state == 0){
				state = 1;
			}else state = 0
			console.log(state);
			var _this = this;
			uni.request({
				url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
				method: 'GET',
				data: {
					act:'edit',
					state:state,
					oid:oid
				},
				success: res => {
					// console.log(res);
					uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						// var id = 'agree'+nid;
					 //  document.getElementById(id).innerHTML="已通过";
					 this.update(1,0).then((res)=>{
					 	console.log(res);
					 });
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		refuse(e){
	
			var oid = e.currentTarget.dataset.oid;
		uni.request({
			url: 'http://wd1900144.pro.wdcase.com/carApi/order.php',
			method: 'GET',
			data: {
				act:'del',
				oid:oid
			},
			success: res => {
				// console.log(res);
				uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				 this.update(1,0).then((res)=>{
				 	console.log(res);
				 });
			},
			fail: () => {},
			complete: () => {}
		});
		
		
		},
		update(pages,cid){
			
			console.log(pages);
			
			return new Promise((resolve, reject) => {
				uni.request({
					url: 'http://wd1900144.pro.wdcase.com/carApi/user.php',
					method: 'GET',
					data: {
						act:'list',
						cid:cid,
						limit:'6',
						pn:pages
					},
					success: res => {
						console.log(res);
						
						if(res.data.is=='default'){
							let cate = res.data.cate;
							let array = [];
			
							for(let x in cate){
								array.push(cate[x].name);
							}
							this.tabTitle = array;
							//为何到此处就不执行了？程序错误所以不会继续向下执行
							this.list = res.data.list;
							
							console.log(this.list);
						}else resolve(res.data);
					
					},
					fail: () => {},
					complete: () => {}
				});
			})
		},
		toTop(){
			this.toView = ''
			setTimeout(()=>{
				this.toView = 'top' + this.currentTab
			},10)
		},
		//改变选择的分类id
		changeTab(index){
			this.currentTab = index
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest(pages) {
			return new Promise((resolve, reject) => {
				this.pages[this.currentTab]++;
				var that = this;
				
				this.update(that.pages[that.currentTab],that.currentTab+1).then((res)=>{
					// console.log(res);
					let newData = res;
					// if(res.count.c)
					uni.showToast({
							icon: 'none',
							title: `加载完成`
						})
					resolve(newData);
				});
				
				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
				// 	})
				// 	let newData = ['新数据1','新数据2','新数据3'];
				// 	resolve(newData);
				// }, 1000)
			})
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current //获取索引
			this.$refs.navTab.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
		console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			uni.showLoading({
				title: '加载中',
				mask:true
			})
			this.isRequest().then((res)=>{
				let tempList = this.list
				//只追加一个分类的数据
				tempList[this.currentTab] = tempList[this.currentTab].concat(res.list)
				// console.log(tempList[this.currentTab].length)
				this.list = tempList
				if(tempList[this.currentTab].length==res.count.c){
					this.max = 1;
				}
				
				this.$forceUpdate() //二维数组，开启强制渲染（重新渲染）
			})
		}, 300),
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
		}
	
	}
};
</script>

<style lang="scss">
		.container999 {
	  width: 100vw;
	  font-size: 28upx;
	  min-height: 100vh;
	  overflow: hidden;
	  color: #6B8082;
	  position: relative;
	  background-color: #f6f6f6;
	}
	.content {
		width: 100%;
	}
	
	.card {
		width: 90%;
		height: 368upx;
		background-color: white;
		margin: 0 auto 42upx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}
	
	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}
	
	
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24upx;
		background-color: #505050;
		z-index: 996;
	}
	
	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56upx;
	}
	
	.search999 {
		width: 32upx;
		height: 32upx;
	}
	
	.searchBox999 {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.input999 {
		color: #999;
		width: 80%;
	}
</style>
